import QtQuick

/*
  自定义组件：进度条
*/
Item {
    id: customProgressBar1
    width: 400
    height: 14

    signal animationOver()

    property real cpbValue: 0 // 进度条值 0-1
    property int cpbPercent: 0 // 进度条百分比
    property color cpbBackColor: "#AAAAAA" // 进度条背景颜色
    property color cpbForeColor: "#F0F0F0" // 进度条前景颜色
    property color cpbTextColor: "#000000" // 进度条文本颜色
    property alias cpbForeGradient: foreRect.gradient // 进度条前景色渐变模式
    property int cpbAniDuration: 500  // 进度条动画时间

    // 无动画复位进度条
    function reset() {
        cpbAniDuration = 0
        cpbValue = 0
        cpbAniDuration = 500
    }

    Rectangle {
        id: backRect
        x: 0
        y: 0
        anchors.fill: parent
        z: 1
        radius: parent.height / 2
        color: cpbBackColor
    }

    Rectangle {
        id: foreRect
        x: 0
        y: 0
        width: cpbValue * parent.width
        height: parent.height
        z: 2
        radius: parent.height / 2
        color: cpbForeColor
        gradient: 20

        Behavior on width {
            NumberAnimation {
                duration: cpbAniDuration

                onRunningChanged: {
                    if(!running && (cpbValue === 1))
                        animationOver()
                }
            }
        }

        onWidthChanged: {
            percentText.text = Math.round(width/parent.width*100).toString()+"%"
        }
    }

    Text {
        id: percentText
        anchors.fill: parent
        verticalAlignment: Text.AlignVCenter
        horizontalAlignment: Text.AlignHCenter
        text: "0%"
        color: cpbTextColor
        z: 3
    }
}
